<template>
	<view class="applyUp">
		
		<TabStrip :tablist="tabList" @tabclick='tabclick'></TabStrip>
		<view v-if="cargoList.length>0">
			<view class="formNo" v-for="(item,index) in cargoList" :key='index'>
				<view class="formNo-list">
					<view class="listView">
						<view class="">
							车次单号：{{item.TruckTransportNO}}
						</view>
						<view class="isGo">
							<text>{{text[item.Status]}}</text>
						</view>
					</view>
					
					<view class="listView">
						<view class="">
							<text>{{item.LicensePlateNO}}</text>
							<text v-if="item.store" class='text'>卸货仓--{{item.store}}</text>
						</view>
						<view class="">
							<button size="mini" @click="cancelBind(index)" class="submitBtn"  
							:class="[item.Status>0?'gray':'']"
							>取消车次</button>
						</view>
					</view>
				</view>
				<!-- :disabled="item.Status>0? true:false"  -->
			</view>
		</view>
		<view class="haveNOList" v-else><view class="haveNOList-view">暂无数据</view></view>
	</view>
</template>

<script>
	import TabStrip from '../../components/tabstrip.vue'
	export default {
		components:{
			TabStrip,
		},
		data() {
			return {
				tabList:['进行中','已完成'],
				index:0,
				dataType:0,
				session:'',
				queueList:[],
				cargoList: [],
				text:[	'已发车','已排队','已完成'],
			};
		},
		mounted(){
			this.getTruckTransportLis()
		},
		methods:{
			
			getTruckTransportLis(){
				uni.showLoading({
				    title: '加载中'
				});
				this.session=uni.getStorageSync('session')
				this.$store.dispatch('uni/GetTruckTransportList',{
					openid:this.session.openid,
					dataType:this.dataType,
					query:true,
					})
				 .then((res)=>{
					console.log('cargo--res:',res)
					this.cargoList=res.Data
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
				
			},
			tabclick(index){
				if(index===1){
					this.dataType=2
				}else{
					this.dataType=0
				}
				this.getTruckTransportLis()
				
			},
			cancelBind(index){
				uni.showModal({
				    title: '取消绑定',
				    content: '是否取消绑定',
				    success: (res)=> {
				        if (res.confirm) {
				            
							
							this.$store.dispatch('uni/CancelTruckTransport',{
							query:true,
							truckTransportNO:this.cargoList[index].TruckTransportNO,
							}).then(res=>{
								const {Message}=res
								uni.showToast({
									icon:'none',
									 title:Message ,
									 duration: 1500
								})
								this.getTruckTransportLis()
								
								
							})
							
									
				        } 
				    }
				});
			},
		}
	}
</script>

<style lang="less" scoped>
.applyUp{
	font-size: 14px;
}
/* components/02-tabstrip/my-tabstrip.wxss */
.formNo-list{
	margin-top: 34upx;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height:180upx;
	padding: 0 30upx;
	.listView{
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		.text{
			margin-left: 40upx;
		}
		.gray{
			background-color: #A2A8A2;
		}
	}
	.isGo{
		width: 100upx;
		text-align: center;
		margin-right: 50upx;
		font-weight: bold;
		font-size: 12px;
	}
}
.submitBtn{
	background-color: #0081FF;
	color: #FFFFFF;
}
.submit{
			background-color:#D6CFCC ;
		}
.haveNOList{
		display: flex;
		text-align: center;
		
		&-view {
			top: 300upx;
			width: 100%;
			height: 300upx;
			line-height: 300upx;
			font-size: 16px;
			
		}
	}
</style>
